import React from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { Card } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { saveUserId } from "@/store/userSlice"

export default function Mine() {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const back = () => {
    navigate(-1)
  }
  const logout = () => {
    localStorage.removeItem('token')
    dispatch(saveUserId(''))
    navigate('/home')
  }
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ '--gap': '16px' }}>
        <span onClick={logout} style={{ fontSize: '16px', lineHeight: '32px' }}>退出</span>
      </Space>
    </div>
  )
  return (
    <div>
      <NavBar style={{ backgroundColor: '#fff' }} back='返回' right={right} onBack={back}>
        个人中心
      </NavBar>
      <div style={{ padding: '20px' }}>
        <h5 style={{ marginBottom: '10px' }}>个人中心</h5>
        <Card onClick={() => navigate('/address')}>地址管理</Card>
        <Card onClick={() => navigate('/order')}>订单中心</Card>
      </div>


    </div>
  )
}
